<template>
      <div class="header">
        <HamburgerVue />
        <Breadcrumb />
        <div class="login">
          <img @click="tobigdata" class="bigdata" width="40" height="40" src="../../assets/bigdata2.png"/>
          <div class="user-dropdown">
            <el-dropdown>
              <span class="el-dropdown-link">
                <span class="user-name">{{ username }}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link to="/system/personal" tag="span">个人中心</router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="logout">退出</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <img class="user-avatar" src="../../assets/头像.gif" />
        </div>
      </div>
    
  </template>
  
  <script>
  import api from "../../api";
  import HamburgerVue from "./Hamburger.vue";
  import Breadcrumb from "./Breadcrumb.vue";
  import { mapState } from "vuex";
  import jsCookie from "js-cookie";
  export default {
    data() {
      return {
        username:"",
        currentIndex: "/BigData",
        isCollapse: false,
      };
    },
    components: {
      HamburgerVue,
      Breadcrumb,
    },
    //mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作
    mounted() {
      this.currentIndex = this.$route.path
      this.$bus.$on("toggleClick", (sf) => {
        this.isCollapse = !this.isCollapse;
      });
     this.username = jsCookie.get("username")
    },
    methods: {
      logout() {
        api.logout()
          .then((res) => {
            if (res.data.code == 2001) {
                jsCookie.remove("username");
                jsCookie.remove("token");
                localStorage.removeItem("tunnel");
                this.$router.push("/");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      tobigdata(){
        this.$router.push('/BigData')
      }
    },
  };
  </script>
  
  <style scoped>
  .lang {
    margin-right: 10px;
  }
  .header {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #fff;
    box-shadow: 0px 0px 5px 1px #999;
  }
  .header :deep(.tou){
    position: absolute;
    left:-230px

  }
  
  .header .user-name {
    margin-right: 10px;
    font-size: 15px;
    border: 1px solid #fff;
    display: inline-block;
    line-height: 40px;
    align-items: center;
  }
  
  .header .login {
    height: 50px;
    float: right;
    margin-right: 20px;
  }
  
  .header .login .item {
    height: 25px;
    margin-right: 30px;
  }
  
  .header .login .item i {
    display: block;
    font-size: 25px;
  }
  
  .el-menu-vertical-demo {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    text-align: left;
    z-index: 1000;
  }
  
  .el-menu-item,
  .el-menu-item-group {
    background-color: #1f2d3d !important;
  }
  .el-menu-item {
    color: rgb(191, 203, 217);
  }
  
  .el-submenu span {
    color: rgb(191, 203, 217);
    margin-left: 7px;
  }
  .el-submenu .el-menu-item {
    height: 50px;
    line-height: 50px;
    padding: 0 45px;
    min-width: 199px;
  }
  .login {
    position: absolute;
    right: 10px;
    top: 0px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  
  .user-dropdown {
    float: right;
  }
  .user-avatar {
    float: right;
    width: 40px;
    height: 40px;
    margin-top:5px;
    margin-right: 10px;
    border-radius: 10px;
  }
  .el-breadcrumb {
    position: absolute;
    left: 50px;
    top: 20px;
  }
  .bigdata{
    margin-right: 10px;
    margin-top: 4px;
  }

  </style>